<template>
  <u-container-layout>
    <zlrt-table :p="ctx">
      <template #before>
        <zlrt-search :p="ctx">
          <template #originalNo>
            <el-input v-model="ctx.otherFilter.originalNo" placeholder="请输入源单"></el-input>
          </template>
        </zlrt-search>
        <div class="tool-bar">
          <el-button type="danger" v-hasPermit="['wms-order:purchase:del']" icon="Delete"
            :disabled="!ctx.selected.length" @click="ctx.batchDelete()">
            批量删除
          </el-button>
          <span style="float:right">
            <el-button type="success" v-hasPermit="['wms-order:purchase:list']" :loading="ctx.exportLoading"
              icon="Download" @click="ctx.export()">
              导出
            </el-button>
            <el-button type="primary" v-hasPermit="['wms-order:purchase:save']" icon="Plus" @click="ctx.showEdit()">
              添加
            </el-button>
          </span>
        </div>
      </template>
      <template #status="scope">
        {{ ctx.other.getStatusName(scope.row.status) }}
      </template>
      <template #planIncoming="scope">
        {{ ctx.other.formatDt(scope.row.planIncoming) }}
      </template>
      <template #operation="scope">
        <el-button type="primary" v-hasPermit="['wms-order:purchase:save']" link size="small" icon="Edit"
          @click="ctx.showEdit(scope.row)">
          明细
        </el-button>
        <el-button v-hasPermit="['wms-order:purchase:del']" type="danger" link size="small" icon="Delete"
          @click="ctx.del(scope.row.id)">
          删除
        </el-button>
      </template>
      <template #after>
        <el-dialog v-model="ctx.editVisible" title="物料明细" width="1000px" append-to-body :close-on-click-modal="false"
          @close="ctx.closeEdit()">
          <el-form :ref="(e) => ctx.formRef = e" :model="ctx.editData" :rules="ctx.rules" v-loading="ctx.editLoading"
            label-width="120px" class="demo-ruleForm">
            <!-- <el-row>
                <el-col :span="12">
                  <el-form-item label="仓库" prop="warehouseId">
                    <el-select v-model="ctx.editData.warehouseId" placeholder="请选择仓库" @change="ctx.other.handleWarehouse">
                      <el-option v-for="item in warehouseOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="单号" prop="originalNo">
                    <el-input v-model="ctx.editData.originalNo" placeholder="请输入单号"/>
                  </el-form-item>
                </el-col>
              </el-row> -->
            <!-- <el-row>
                <el-col :span="12">
                  <el-form-item label="项目名称" prop="projectId">
                    <el-select v-model="ctx.editData.projectId" placeholder="请选择项目" @change="ctx.other.handleProject">
                      <el-option v-for="item in projectOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                  </el-form-item> 
                </el-col>
                <el-col :span="12">
                  <el-form-item label="状态" prop="status">
                    <el-select v-model="ctx.editData.status" placeholder="请选择状态">
                      <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="日期" prop="date">
                <el-date-picker
                  v-model="ctx.editData.date"
                  type="date"
                  placeholder="请选择日期"
                />
              </el-form-item> -->
            <!-- <el-form-item label="备注" prop="remark">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="ctx.editData.remark"/>
              </el-form-item> -->
            <!-- <el-divider content-position="center">物料明细</el-divider> -->
            <!-- <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                  <el-button type="primary" size="small" icon="Plus" @click="ctx.other.addGoods">
                    添加
                  </el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button type="danger" icon="delete" size="small" @click="ctx.other.delGoods" :disabled="!ctx.editData.orderGoodsList || !ctx.editData.orderGoodsList.length">删除</el-button>
                </el-col>
              </el-row> -->
            <el-table :data="ctx.editData.orderGoodsList" style="width: 100%;margin-top: 10px;">
              <!-- <el-table-column type="selection" width="55" /> -->
              <el-table-column prop="skuName" label="物料名称" width="250">
                <template #default="scope">
                  <!-- <el-select
                      v-model="scope.row.skuName"
                      style="width: 200px;"
                      filterable
                      @change="ctx.other.handleGoodsChange"
                    >
                      <el-option v-for="item in goodsOptions" :key="item.id" :label="item.skuName" :value="item.skuName"></el-option>
                    </el-select> -->
                  {{scope.row.skuName}}
                </template>
              </el-table-column>
              <el-table-column prop="barCode" label="物料编码"></el-table-column>
              <el-table-column prop="specification" label="规格型号" width="200">
                <template #default="scope">
                  {{ scope.row.specification || '-'}}
                </template>
              </el-table-column>
              <el-table-column prop="number" label="采购数量">
                <template #default="scope">
                  <!-- <el-input style="width: 100%;" v-model="scope.row.number" /> -->
                  {{scope.row.number}}
                </template>
              </el-table-column>
              <el-table-column prop="number1" label="已入库数量">
                <template #default="scope">
                  <!-- <el-input style="width: 100%;" v-model="scope.row.number" /> -->
                  {{scope.row.number1}}
                </template>
              </el-table-column>
              <el-table-column prop="unit" label="单位">
                <template #default="scope">
                  {{ scope.row.unit || '-'}}
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <template #footer>
              <span class="dialog-footer">
                <!-- <el-button @click="ctx.editVisible = false">取消</el-button>
                <el-button type="primary" @click="ctx.save()">确定</el-button> -->
                <el-button @click="ctx.other.export()">导出</el-button>
              </span>
            </template>
        </el-dialog>
      </template>
    </zlrt-table>
  </u-container-layout>
</template>

<script lang="ts" src="./purchase" />

<style lang="scss" scoped>

</style>
